import React, { useState, useEffect } from "react";
import Slider from "rc-slider";
import "rc-slider/assets/index.css";

interface SliderVerificationProps {
  onVerify: (verified: boolean) => void;
  verified: boolean;
}

const SliderVerification: React.FC<SliderVerificationProps> = ({
  onVerify,
  verified,
}) => {
  const [value, setValue] = useState(0);
  const [status, setStatus] = useState<"default" | "success" | "error">(
    "default"
  );

  // 重置状态
  useEffect(() => {
    if (!verified && value > 0) {
      setValue(0);
      setStatus("default");
    }
  }, [verified]);

  // 处理滑动变化
  const handleChange = (newValue: number | number[]) => {
    if (verified) return;
    setValue(typeof newValue === "number" ? newValue : newValue[0]);
  };

  // 处理滑动完成
  const handleAfterChange = (newValue: number | number[]) => {
    if (verified) return;

    const finalValue = typeof newValue === "number" ? newValue : newValue[0];

    // 如果滑动到接近最大值，认为验证成功
    if (finalValue >= 95) {
      setStatus("success");
      setValue(100);
      onVerify(true);
    } else {
      setStatus("error");
      // 验证失败时重置
      setTimeout(() => {
        setValue(0);
        setStatus("default");
      }, 500);
    }
  };

  return (
    <div className="slider-verification-container w-full">
      <div
        className={`relative h-[50px] overflow-hidden border ${
          status === "error"
            ? "border-red-500 dark:border-red-400"
            : status === "success"
            ? "border-green-500 dark:border-green-400"
            : "border-gray-200 dark:border-gray-700"
        } rounded-xl bg-white dark:bg-gray-700/50`}
      >
        {/* 滑块容器 */}
        <div className="absolute inset-0 flex items-center px-3">
          <Slider
            value={value}
            onChange={handleChange}
            onAfterChange={handleAfterChange}
            min={0}
            max={100}
            disabled={verified}
            railStyle={{
              height: 6,
              backgroundColor:
                status === "error"
                  ? "rgba(239, 68, 68, 0.2)" // red-400 with opacity
                  : status === "success"
                  ? "rgba(34, 197, 94, 0.2)" // green-500 with opacity
                  : "rgba(229, 231, 235, 0.5)", // gray-200 with opacity
              borderRadius: "4px",
            }}
            trackStyle={{
              height: 6,
              backgroundColor:
                status === "success"
                  ? "var(--slider-success-color, #22c55e)" // green-500
                  : status === "error"
                  ? "var(--slider-error-color, #ef4444)" // red-400
                  : "#1296db", // 主题蓝色
              borderRadius: "4px",
              transition: "background-color 0.3s ease",
            }}
            handleStyle={{
              width: 24,
              height: 24,
              marginTop: -9,
              backgroundColor:
                status === "success"
                  ? "#22c55e" // green-500
                  : status === "error"
                  ? "#ef4444" // red-400
                  : "#1296db", // 主题蓝色
              borderColor: "transparent",
              opacity: 1,
              boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
              transition: "transform 0.2s ease, background-color 0.3s ease",
              transform: value > 0 && value < 95 ? "scale(1.05)" : "scale(1)",
            }}
          />
        </div>

        {/* 文字提示层 */}
        <div className="absolute inset-0 flex items-center justify-center text-sm select-none pointer-events-none">
          <span
            className={`transition-opacity duration-200 ${
              value > 20 ? "opacity-0" : "opacity-100"
            } ${
              status === "success"
                ? "text-green-600 dark:text-green-400"
                : status === "error"
                ? "text-red-600 dark:text-red-400"
                : "text-gray-500 dark:text-gray-400"
            }`}
          >
            {status === "success" || verified
              ? "验证成功"
              : status === "error"
              ? "验证失败，请重试"
              : value > 0
              ? "请滑动到最右侧"
              : "向右滑动滑块验证"}
          </span>
        </div>
      </div>

      {/* 验证结果提示 */}
      {status === "error" && !verified && (
        <p className="mt-1 text-sm text-red-600 dark:text-red-400">
          请将滑块滑动到最右侧
        </p>
      )}
    </div>
  );
};

export default SliderVerification;
